<template>
	<view class="">
		<u-navbar :is-back="true" title="患者评论" title-color="white" :border-bottom="false" :background="background">
		</u-navbar>

		<view class="" style="background-color: #00a8ff;height: 80rpx;"></view>

		<view class="u-p-26 u-m-l-26 u-m-r-26 u-flex shadow">
			<view class="u-flex-1 text_center">
				<p class="u-font-16">{{count}}</p>
				<p>收到评论</p>
			</view>
			<view class="u-flex-1 text_center">
				<p class="u-font-16">{{rate}} <text class="u-font-10">%</text> </p>
				<p>好评率</p>
			</view>
			<view class="u-flex-1">
				<u-rate :count="5" v-model="value" active-color="#057eff" :disabled="true"></u-rate>
			</view>
		</view>


		<view class="container u-skeleton u-p-t-26 u-p-b-26 u-m-l-26 u-m-r-26"
			style="position: relative;top: -66rpx;border-bottom: 1px solid #f9f9f9;">
			<view class="u-flex u-col-top">
				<view class="u-flex-1">
					<image src="../../../../static/headPhoto/photo1.png" style="width: 50rpx;height: 50rpx;" mode="">
					</image>
				</view>
				<view class="u-flex-6">
					<u-rate :count="5" v-model="value" active-color="#057eff" :disabled="true"></u-rate>
					<p class="u-font-12">此用户没有填写评语</p>
					<text class="textxiao">187 **** 1515</text>
				</view>
				<view class="u-flex-1">
					<p style="color:#057eff;text-align: right;">回复</p>
					<p class="u-font-12" style="visibility: hidden;">4</p>
					<text class=" textxiao">2021.05.16</text>
				</view>
			</view>
			<view class="u-flex u-col-top" v-show="true">
				<view class="u-flex-1">
				</view>
				<view class="u-flex-7 u-p-10" style="background-color: #f2f4f4;border-radius: 5rpx;">
					<p class="u-font-10">谢谢您的评论，很高兴可以帮助您!</p>
				</view>
			</view>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#00a8ff'
				},
				value: 5,
				count: '160',
				rate: '98.6',
				// 随意填充一些模拟数据，以撑开元素，供骨架组件查询和模拟块状数据
				loading: true, // 是否显示骨架屏组件
				commentList: []
			}
		},
		methods: {},
		onLoad() {
			// 通过延时模拟向后端请求数据，调隐藏骨架屏
			setTimeout(() => {
				this.loading = false;
			}, 2000)
		}
	}
</script>

<style>
	.text_center {
		text-align: center;
		color: #057eff;
	}

	.shadow {
		background-color: #FFFFFF;
		box-shadow: 0rpx 5rpx 5rpx #dbe4f5;
		border-radius: 10rpx;
		position: relative;
		top: -66rpx;
	}

	.textxiao {
		font-size: 20rpx;
		color: #c3c3c3;
	}
</style>
